<template>
	  <view class="container">
	    <scroll-view scroll-y class="list-wrap" ref="chatList">
	      <view v-for="(item, index) in list" :key="index">
	        <view class="left" v-if="item.id === 'waiter'">
	          <image :src="'/images/waiter.png'" class="avatar" mode="scaleToFill"/>
	          <view class="left-triangle"></view>
	          <text class="content">{{ item.content }}</text>
	        </view>
	        <view class="right" v-if="item.id === 'consumer'">
	          <text class="content">{{ item.content }}</text>
	          <view class="right-triangle"></view>
	          <image :src="'/images/default.png'" class="avatar" mode="scaleToFill"/>
	        </view>
	      </view>
	    </scroll-view>
	    <view class="form-wrap">
	      <input class="inp" placeholder="想跟TA说点什么..." confirm-type="send" @input="contentBindKeyInput" :value="content"/>
	      <text class="send-btn" @tap="send">发送</text>
	    </view>
	  </view>
</template>

<script>
	export default {

		data() {
			return {
				list: [],
				content: '',
				webSocket: null
			}
		},
		methods: {
			connectWebSocket() {
				this.webSocket = uni.connectSocket({
					url: 'ws://localhost:8502/websocket/2/1',
					header: {
						'content-type': 'application/json'
					},
					success: () => {
						console.log('WebSocket connection opened.');
					},
					fail: (err) => {
						console.error('WebSocket connection failed:', err);
					}
				});

				this.webSocket.onMessage((res) => {
					const item = {
						id: 'waiter',
						content: res.data
					};
					this.list.push(item);
					this.$nextTick(() => {
						this.scrollToBottom();
					});
				});

				this.webSocket.onClose(() => {
					console.log('WebSocket connection closed.');
				});

				this.webSocket.onError((error) => {
					console.error('WebSocket error:', error);
				});
			},
			contentBindKeyInput(e) {
				const content = e.target.value.trim();
				this.content = content;
			},
			send() {
				if (this.content === '') {
					return;
				}

				uni.showLoading({
					title: 'Sending...',
				});

				this.webSocket.send({
					data: this.content,
					success: () => {
						uni.hideLoading();
						this.content = '';
						const item = {
							id: 'consumer',
							content: this.content
						};
						this.list.push(item);
						this.$nextTick(() => {
							this.scrollToBottom();
						});
					},
					fail: () => {
						uni.showToast({
							title: 'Failed to send',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			scrollToBottom() {
				// Assuming there's a scroll view with a ref named "chatList"
				this.$refs.chatList.scrollTo({
					scrollTop: Number.MAX_SAFE_INTEGER,
					duration: 300
				});
			}
		},
		mounted() {
			this.connectWebSocket();
		},
		beforeDestroy() {
			if (this.webSocket) {
				this.webSocket.close();
			}
		}
	}
</script>

<style>
page {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
}

.list-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  margin-top: 5rpx;
  background: #d3d2d2;
  overflow: hidden;
  padding: 15rpx 0 15rpx 0;
}

.list-wrap .item {
  width: 100%;
  margin-top: 50rpx;
}

.list-wrap .item .left {
  display: flex;
  justify-content: flex-start;
  margin: 0 20rpx 0 20rpx;
}

.list-wrap .item .right {
  display: flex;
  justify-content: flex-end;
  margin: 0 20rpx 0 20rpx;
}

.list-wrap .item .avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 15rpx;
}

.list-wrap .item .left-triangle {
  background-color: #ffffff;
  height: 40rpx;
  width: 40rpx;
  transform: rotate(40deg);
  margin: 10rpx -25rpx 0 20rpx;
  border-radius: 10rpx;
  flex-shrink: 0;
  z-index: 1;
}

.list-wrap .item .right-triangle {
  background-color: #ffffff;
  height: 40rpx;
  width: 40rpx;
  transform: rotate(40deg);
  margin: 10rpx 20rpx 0 -25rpx;
  border-radius: 10rpx;
  flex-shrink: 0;
  z-index: 1;
}

.list-wrap .item .content {
  background-color: #ffffff;
  padding: 20rpx 25rpx 20rpx 30rpx;
  border-radius: 12rpx;
  color: #333333;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

.form-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 10rpx 0 10rpx 0;
}

.form-wrap .inp {
  background-color: #ffffff;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 20rpx;
  width: 70%;
  padding: 0 15rpx 0 15rpx;
}

.form-wrap .send-btn {
  width: 100rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff7162;
  color: #ffffff;
  border-radius: 10rpx;
  margin: 0 0 0 10rpx;
}
</style>